<script setup>
// 引入响应式数据
import { reactive, ref ,watch} from "vue";
// 拿到状态管理器
import { useUserStore } from "@/stores/counter";
import { getNode, delNode, etidNode ,} from "@/api/node.js";
import SetEditiosView from "@/components/SetEditiosView.vue";
import {timestampToTime} from "@/public/public"
// 引入我的子组件
import { ElMessage } from "element-plus";
// 状态管理器
const useStorer = useUserStore();
const ind = ref();
//  存放响应式数据
const nodeData = reactive([]);
const token = useStorer.userMsg.token;
// 拿到任务信息
getNode(useStorer.userMsg.token).then((res) => {
  if (res.data.code === 1) {
    res.data.data.forEach(element => {
      element.sendTimeShow = timestampToTime(element.sendTime)
    });
    nodeData.push(...res.data.data);
    // console.log(nodeData);
  }
});
const deleteRow = (row) => {
  // 只有管理员可以修改任务
  if (row.username === "admin") {
    ElMessage("没有权限，请联系管理员");
    return;
  }
  // 调用删除用户的几接口
  delNode({ token, noteid: row.row.noteid }).then((res) => {
    ElMessage({
      message: res.data.msg,
      type: "info",
    });
    nodeData.splice(row.$index, 1);
  });
};

// 发布任务创建 后端请求
function isShow2(row){
    const fzData = {};
    for(let i in row){
        fzData[i] = row[i]
    }
    nodeData.push(fzData)
}

let dialogFormVisible = ref(false);
let rowData = ref({});
// -编辑功能-
function updateRow(row) {
  rowData.value = row.row;
  ind.value = row.$index;
  // console.log(1,row);
  if (row.username === "admin") {
    ElMessage("没有权限请联系管理员");
    return;
  }
  dialogFormVisible.value = true;

}

// 添加功能 子组件传来的值
// function addNoter(rs){
//   rs.token=token;
//   addNoter(rs).then((res)=>{
//     console.log("子组件传来的数据")
//   })
// }

//父组件的isshow设置自组件穿过来了val值》 false
function isShow(val) {
  dialogFormVisible.value = val;
}
// 子组件传来的数据
function getNewData(row) {
  row.token = token;

  etidNode(row).then((res) => {
    console.log("服务器返回的信息",res)
    console.log(row);
    if (res.data.code === 1) {
      ElMessage({
        message: "修改成功",
        type: "success",
      });
      // console.log(nodeData[ind.value],ind.value)
      console.log(row[0])
      nodeData[ind.value] = row;
    } else {
      ElMessage({
        message: res.data.msg,
        type: "error",
      });
    }
  });
}
</script>

<template>
  <div>
    <h2 class="notice">公告列表</h2>
    <div class="notice">
      <input type="text" class="text" placeholder="搜索公告" />
      <input type="button" click="bnt" value="搜索" class="btn" />
      <p class="addx" @click="$router.push({ path:'/addnotice'})">添加公告</p>
    </div>

    <el-table :data="nodeData"  style="width: 100%">
      <el-table-column  prop="title" label="公告标题" width="250" />
      <el-table-column prop="sendTimeShow" label="发布时间" width="200" />
      <el-table-column prop="staffName" label="发起人" width="200" />
      <el-table-column prop="content" label="查看详情" width="200" />
      <el-table-column fixed="right" label="Operations" width="200">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope)"
          >
            删除
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="updateRow(scope)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <SetEditiosView
      :dialogFormVisible="dialogFormVisible"
      :rowData="rowData"
      @isShow="isShow"
      @getNewData="getNewData"
    ></SetEditiosView>

    <!-- 发布事件 -->
    <!-- <addNotice 
     @isShow2="isShow2"
    ></addNotice> -->
  </div>
</template>

<style>
.notice {
  font-size: 15px;
  color: #09f;
  background-color: #f2f2f2;
  padding: 8px;
  padding-left: 10px;
  margin-bottom: 10px;
}
.btn {
  background: white;
  border: 1px solid #999;
  margin-left: 10px;
  height: 22px;
  width: 45px;
  border-radius: 10px;
  cursor: pointer;
}
.btn:hover {
  background: #09f;
  color: aliceblue;
}
.addx {
  font-size: 15px;
  color: #09f;
  float: right;
  margin-right: 10px;
  cursor: pointer;
}
.addx:hover {
  color: blue;
}
.text {
  height: 23px;
  cursor: pointer;
}
</style>
